<template>
  <div class="wrap">
    <div class="form-wrap">
      <el-form
        ref="ruleForm"
        :model="userInfo"
        :rules="rules"
        label-width="100px"
      >
        <h1>回声运营后台</h1>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="userInfo.phone"
            @change="handleChangePhone"
          ></el-input>
        </el-form-item>
        <el-form-item label="图形验证">
          <el-button
            :type="canGetPhoneCaptcha ? 'primary' : ''"
            class="captcha-btn"
            @click="handleGetCaptcha"
          >
            <i v-if="canGetPhoneCaptcha" class="el-icon-check"></i>
            {{ canGetPhoneCaptcha ? '验证通过' : '点击按钮进行验证' }}
          </el-button>
        </el-form-item>
        <el-form-item label="手机验证码" prop="code">
          <el-input
            v-model="userInfo.code"
            :class="[canGetPhoneCaptcha ? 'blue' : '']"
          >
            <el-button
              slot="append"
              class="count-down"
              @click="handleGetPhoneCaptcha"
            >
              {{ countDown }}
            </el-button>
          </el-input>
        </el-form-item>
        <el-button class="submit-btn" type="primary" @click="handleLogin">
          登录
        </el-button>
      </el-form>
    </div>
    <Captcha
      :big.sync="captcha.big"
      :dialogVisible.sync="dialogVisible"
      :small.sync="captcha.small"
      :y="captcha.y"
      @handleChangeX="handleChangeX"
    ></Captcha>
  </div>
</template>

<script>
import Captcha from './Captcha'
import { NOOP } from '@/utils'

import { postCaptcha, postPhoneCaptcha, postValiCaptcha } from '@/api/login'

export default {
  components: { Captcha },
  data() {
    return {
      userInfo: {
        phone: undefined,
        code: undefined
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式错误'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      // 是否可以获取手机验证码
      canGetPhoneCaptcha: false,
      // 是否已经点击获取手机验证码
      hasGetPhoneCaptcha: false,
      // 验证码文案
      countDown: '获取验证码',
      // 倒计时
      timer: null,

      captcha: {
        x: null,
        y: null,
        big: null,
        small: null
      },
      dialogVisible: false
    }
  },
  methods: {
    handleChangePhone(value) {
      this.canGetPhoneCaptcha = false
    },
    handleGetCaptcha() {
      if (this.canGetPhoneCaptcha) return
      this.$refs['ruleForm'].validateField('phone', async err => {
        if (!err) {
          const res = await postCaptcha(this.userInfo.phone)
          if (res.code === 200) {
            this.captcha.y = res.data.y
            this.captcha.big = res.data.img.big + '?math=' + Math.random()
            this.captcha.small = res.data.img.small + '?math=' + Math.random()
            this.dialogVisible = true
          }
        }
      })
    },
    async handleChangeX(value) {
      this.captcha.x = value
      const res = await postValiCaptcha(this.userInfo.phone, value)

      if (res.code === 200) this.canGetPhoneCaptcha = true

      this.dialogVisible = false
    },
    async handleGetPhoneCaptcha() {
      if (!this.canGetPhoneCaptcha) return

      if (this.hasGetPhoneCaptcha) return
      this.hasGetPhoneCaptcha = true
      this.countDown = 60
      this.timer = setInterval(() => {
        this.countDown--
        if (this.countDown === 0) {
          clearInterval(this.timer)
          this.countDown = '重新获取'
          this.hasGetPhoneCaptcha = false
        }
      }, 1000)
      const res = await postPhoneCaptcha(this.userInfo.phone, this.captcha.x)
      if (res.code === 200) {
        this.$message.success('验证码已发送，请注意查收')
      } else {
        clearInterval(this.timer)
        this.countDown = '重新获取'
        this.hasGetPhoneCaptcha = false
      }
    },
    // 登录
    handleLogin() {
      if (!this.canGetPhoneCaptcha) {
        this.$message.error('请完成图形验证')
        return
      }

      this.$refs.ruleForm.validate(valid => {
        if (!valid) return

        this.$store
          .dispatch('LoginByUsername', this.userInfo)
          .then(res => {
            this.$router.push({
              path: '/dashboard/dashboard'
            })
          })
          .catch(NOOP)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width           : 100%;
  height          : 100%;
  background      : url("~@/assets/dashboard/bg@2x.png") no-repeat center center;
  background-size : cover;
  position        : relative;

  .form-wrap {
    width         : 410px;
    height        : 330px;
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -80%);
    border-radius : 10px;
    background    : linear-gradient(to bottom, rgb(164, 60, 246), rgb(0, 184, 249));
    padding       : 2px;

    ::v-deep .el-form {
      width         : 100%;
      height        : 100%;
      background    : linear-gradient(to bottom, rgb(30, 22, 75), rgb(43, 26, 97));
      border-radius : 10px;

      h1 {
        font-size     : 24px;
        text-align    : center;
        padding       : 10px;
        margin-bottom : 10px;
        color         : #fff;
      }

      .submit-btn {
        width       : 250px;
        margin-left : 100px;
      }

      .el-input {
        width : 250px;
      }

      .blue {
        .el-input-group__append {
          background-color : #409eff;
          color            : #fff;
        }
      }

      .el-input-group__append {
        padding : 0 10px;

        .count-down {
          width   : 100px;
          padding : 0;
        }
      }

      .el-form-item__label {
        color : #fff;
      }
    }
  }
}
</style>
